<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <text class="nav-title">外出记录</text>
    </view>

    <!-- 搜索框 -->
    <view class="search-wrapper">
      <input
        class="search-input"
        v-model="searchKey"
        placeholder="搜索客户名称"
        confirm-type="search"
        @confirm="onSearch"
      />
      <image class="search-icon" src="../../static/icons/search.png" />
    </view>

    <!-- 卡片列表 -->
    <scroll-view class="record-list" scroll-y>
      <template v-if="filteredRecords.length">
        <OutingRecordCard
          v-for="rec in filteredRecords"
          :key="rec.outingId"
          :record="rec"
          @updated="fetchRecords"
        />
      </template>
      <view v-else class="no-record">
        <text>暂无外出记录</text>
      </view>
    </scroll-view>

    <!-- 底部 TabBar -->
    <view class="tab-bar">
      <view
        class="tab-item"
        :class="{ active: currentTab === 'daily' }"
        @tap="switchTab('daily')"
      >
        <image
          :src="currentTab==='daily'
            ? '../../static/icons/home-active.png'
            : '../../static/icons/home.png'"
        />
        <text>日常护理</text>
      </view>
      <view
        class="tab-item"
        :class="{ active: currentTab === 'history' }"
        @tap="switchTab('history')"
      >
        <image
          :src="currentTab==='history'
            ? '../../static/icons/history-active.png'
            : '../../static/icons/history.png'"
        />
        <text>护理历史</text>
      </view>
    </view>
  </view>
</template>

<script>
import OutingRecordCard from '@/components/OutingRecordCard.vue'
import { getOutingRecordList } from '@/api/client'

export default {
  name: 'OutingList',
  components: { OutingRecordCard },
  data() {
    return {
      customerId: null,
      customerName: '',
      currentTab: 'daily',
      searchKey: '',
      records: []
    }
  },
  computed: {
    filteredRecords() {
      const key = this.searchKey.trim().toLowerCase()
      if (!key) return this.records
      return this.records.filter(r =>
        r.customerName.toLowerCase().includes(key)
      )
    }
  },
  async onLoad(options) {
    this.customerId = options.customerId
    this.customerName = decodeURIComponent(options.customerName||'')
    await this.fetchRecords()
  },
  methods: {
    async fetchRecords() {
      try {
        const resp = await getOutingRecordList({
          customerId: this.customerId,
          page: 1,
          pageSize: 100
        })
        this.records = resp.data.records
      } catch (err) {
        console.error('fetchRecords:', err)
        uni.showToast({ title: '加载失败', icon: 'none' })
      }
    },
    onSearch() {
      // 可调用 fetchRecords 并传入 searchKey 进行服务端搜索
    },
    switchTab(tab) {
      if (tab === this.currentTab) return
      this.currentTab = tab
      const url = tab === 'daily'
        ? `/pages/customerProject/customerProject?customerId=${this.customerId}&customerName=${encodeURIComponent(this.customerName)}`
        : `/pages/careHistory/careHistory?customerId=${this.customerId}&customerName=${encodeURIComponent(this.customerName)}`
      uni.navigateTo({ url })
    }
  }
}
</script>

<style scoped>
.page-container { position:relative; height:100%; background:#f1f9f9; }

/* 顶部导航 */
.nav-bar {
  display:flex; align-items:center;
  height:130px; padding-top:45px; padding:0 16px;
  background-image:url('/static/images/background1.png');
  background-size:cover; background-position:center;
}
.nav-title { flex:1; text-align:center; color:#fff; font-size:18px; font-weight:600; }

/* 搜索框 */
.search-wrapper { position:relative; margin:12px 16px }
.search-input {
  height:36px; padding:0 36px 0 12px;
  border-radius:18px; border:none; background:#fff;
  font-size:14px; box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.search-icon {
  position:absolute; right:16px; top:50%;
  width:20px; height:20px; transform:translateY(-50%);
}

/* 列表 */
.record-list { flex:1; padding-bottom:56px; overflow-y:auto; }
.no-record { margin-top:60px; text-align:center; color:#999; font-size:16px; }

/* 底部 TabBar */
.tab-bar {
  position:fixed; left:0; right:0; bottom:0;
  height:56px; display:flex; background:#fff; border-top:1px solid #e5e5e5; z-index:100;
}
.tab-item {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#888; font-size:12px;
}
.tab-item.active { color:#00c3b0 }
.tab-item image { width:24px; height:24px; margin-bottom:4px; }
</style>
